<template>
  <div class="login">
    <img class="login__avatar" :src="avatarImg" />
    <div class="login__input">
      <input class="login__input__content" v-model="username" placeholder="请输入用户名" autocomplete="off" />
    </div>
    <div class="login__input">
      <input class="login__input__content" v-model="password" type="password" placeholder="请输入密码" autocomplete="new-password" />
    </div>
    <div class="login__btn" @click="loginHandle">登录</div>
    <div class="login__link" @click="goRegister">立即注册</div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import avatarImg from '../../assets/avatar@2x.png'
import { login } from '../../api/user'
import createMessage from '../../components/message/Message.js'
import storage from '../../utils/storage.js'

export const useLoginEffect = () => {
  const router = useRouter()
  const store = useStore()
  const loginData = reactive({
    username: '',
    password: ''
  })
  const loginHandle = async () => {
    if (!loginData.username || !loginData.password) {
      createMessage({ message: '用户名和密码不能为空', type: 'warning' })
      return
    }
    const { username, password } = loginData
    try {
      let res = await login({ username, password })
      if (res.code === 200) {
        // 登录成功
        storage.setItem('token', res.data.token)
        // 将登录用户信息保存到store中
        store.commit('setLoginUser', res.data.loginUser)
        router.replace('/')
      } else {
        createMessage({ message: res.desc, type: 'warning' })
      }
    } catch (err) {
      createMessage({ message: '登录失败', type: 'danger' })
    }
  }
  const goRegister = () => {
    router.push('/register')
  }

  return {
    ...toRefs(loginData),
    loginHandle,
    goRegister
  }
}

export default {
  setup() {
    const { username, password, loginHandle, goRegister } = useLoginEffect()

    return {
      username,
      password,
      loginHandle,
      goRegister,
      avatarImg
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  &__avatar {
    width: 0.66rem;
    height: 0.66rem;
    margin-bottom: 0.4rem;
  }
  &__input {
    margin: 0 0.4rem 0.16rem;
    background: #f9f9f9;
    border: 0.01rem solid rgba(0, 0, 0, 0.1);
    border-radius: 0.06rem;
    &__content {
      height: 0.48rem;
      width: 100%;
      padding: 0 0.16rem;
      box-sizing: border-box;
      border: none;
      background: none;
      outline: none;
      font-size: 0.16rem;
      color: #00000080;
      &::placeholder {
        color: #00000080;
      }
    }
  }
  &__btn {
    margin: 0.32rem 0.4rem 0.16rem;
    background: $btn-bgColor;
    box-shadow: 0 0.04rem 0.08rem 0 #0091ff52;
    border-radius: 0.04rem;
    color: $bgColor;
    font-size: 0.16rem;
    height: 0.48rem;
    line-height: 0.48rem;
  }
  &__link {
    font-size: 0.14rem;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
